<template>
  <div v-if="isVisible && mapModuleIndex == 1" id="scenePop" class="scenePop">
    <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0"/>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="属性信息" name="first">
        <ul
          class="ul-list"
          style="margin-top: 8px; margin-bottom: 2px; max-height:187px;overflow-y:auto; "
        >
          <li v-for="item in fields" :key="fields.index">
            <span class="fieldTitle">{{ item.k }} :</span>&nbsp;&nbsp;&nbsp;
            <span>{{ item.v }}</span>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label">
          <el-badge :value="images.length" class="item" type="primary">图片信息</el-badge>
        </span>
        <el-carousel :autoplay="false" arrow="always" height="200px" trigger="click">
          <el-carousel-item v-for="item in images" :key="item.index">
            <el-image :src="image_url+item" style="width:291px; height:196px"/>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label">
          <el-badge :value="videos.length" class="item" type="primary">视频信息</el-badge>
        </span>
        <el-carousel :autoplay="false" arrow="always" height="200px" trigger="click">
          <el-carousel-item v-for="item in videos" :key="videos.index">
            <video style="width: 291px; height: 196px" controls>
              <source :src="video_url+item" type="video/mp4">
            </video>
          </el-carousel-item>
        </el-carousel>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
  import {mapState} from 'vuex'

  export default {
    name: 'Index',
    data: function () {
      return {
        activeName: 'first',
        images: [],
        videos: [],
        fields: [],
        remote: [],
        image_url: 'http://218.10.70.73:3012/images/',
        video_url: 'http://218.10.70.73:3012/video/',
        feature: undefined,
        isVisible: undefined
      }
    },
    methods: {
      handleClick(tab, event) {

      },
      setData(feature, dictionary) {
        const vi = document.getElementsByTagName('video')
        for (let i = 0; i < vi.length; i++) {
          vi[i].load()
        }
        this.feature = feature
        const properties = feature.properties
        this.fields = []
        this.videos = [] // 'DJI_0489.mp4','DJI_0490.mp4','DJI_0491.mp4','DJI_0492.mp4','DJI_0608.mp4','DJI_0609.mp4'
        this.images = []
        for (const key in properties) {
          if (key === 'images' || key === 'fileName') {
            const images = properties[key]
            const files = images.split(',')
            for (let i = 0; i < files.length; i++) {
              if (files[i] === '') {
                continue
              }
              if (files[i].substring(files[i].indexOf('.')) === '.mp4') {
                this.videos.push(files[i])
              } else {
                this.images.push(files[i])
              }
            }
            continue
          }
        }
        for (const key in dictionary) {
          const value = properties[key]
          this.fields.push({k: dictionary[key] ? dictionary[key] : key, v: value})
        }
      }
    },
    computed: {
      ...mapState({
        compare(state) {
          return state.xcgl.comparable
        },
        mapModuleIndex(state) {
          return state.eswyzt.mapModuleIndex
        }
      })
    },
    beforeDestroy() {
    }
  }
</script>
<style scoped>

  .scenePop {
    position: absolute;
    padding: 15px;
    margin: 0;
    position: absolute;
    width: 310px;
    background-color: rgba(128, 128, 128, 0.3);
    height: 280px;
    border-radius: 5px;
    padding-left: 12px;
    padding-right: 10px;
    padding-top: 10px;
  }

  .scenePop float {
    right: 2%;
    top: 2%;
  }

  .scenePop:after {
    content: "";
    position: absolute;
    bottom: -50px;
    left: 50px;
    border-width: 0 20px 50px 0px;
    border-style: solid;
    border-color: transparent #fff;
    display: block;
    width: 0;
  }

  /* .mapboxgl-popup-content {
    background-color: rgba(0, 0, 0, .3);
  } */

  .scenePop .el-tabs__item {
    font-size: 16px;
    color: #fff;
  }

  .scenePop .el-tabs__item.is-active {
    font-size: 16px;
    color: #fff;
    text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac, 0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
  }

  .scenePop .el-tabs__active-bar {
    background-color: #398f86FF;
  }

  .scenePop .el-tabs__item:hover {
    font-size: 16px;
    color: #398f86FF;
  }

  .scenePop .el-badge__content--primary {
    background-color: #398f86FF;
  }

  .scenePop .el-badge__content.is-fixed {
    top: 10px;
  }

  .ul-list li {
    list-style: none;
    margin: 0;
    margin-left: 10px;
    margin-bottom: 4px;
    padding: 0;
    height: 22px;
    line-height: 22px;
    float: left;
    width: calc(100% - 10px);
    height: auto;
    color: #fff;
  }

  .ul-list li .fieldTitle {
    font-weight: bold;
    color: #000;
  }

  .ul-list {
    width: 100%;
    float: left;
    padding: 0px;
    font-size: 12px;
    font-family: "Helvetica Neue";
  }

  .el-badge item {
    color: #fff;
  }

  /**去掉滚动条 */
  /* .ul-list::-webkit-scrollbar {
    display: none;
  } */

  /* .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: rgba(0, 0, 0, 3)
  } */
</style>

